import React, { FC, useState } from "react"
import "./Menu.css"
import { CodeOutlined, CodeFilled, RadarChartOutlined, MobileFilled, FormOutlined, AccountBookOutlined } from "@ant-design/icons"
import type { MenuProps } from "antd"
import { Menu } from "antd"
import { useNavigate } from "react-router-dom"

// interface iMenuProps {
//   items: { key: string; label: string }[]
// }
type MenuItem = Required<MenuProps>["items"][number]

const items: MenuItem[] = [
  {
    label: "Frontend",
    key: "keyFrontend",
    icon: <CodeOutlined />,
  },
  {
    label: "Backend",
    key: "keyBackend",
    icon: <CodeFilled />,
  },
  {
    label: "Fullstack",
    key: "keyFullstack",
    icon: <RadarChartOutlined />,
  },
  {
    label: "Mobile",
    key: "keyMobile",
    icon: <MobileFilled />,
  },
  {
    label: "知识点",
    key: "keyKnowledge",
    icon: <FormOutlined />,
  },
  {
    label: "个人出售",
    key: "adv",
    icon: <AccountBookOutlined />,
  },
]

const MyMenu: FC = () => {
  const nav = useNavigate()
  const [current, setCurrent] = useState("")
  const onClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key)
    if (e.key === "keyKnowledge") {
      nav("/knowledge")
    } else if (e.key === "adv") {
      nav("/adv")
    } else {
      const query = `?category=${e.key}`
      nav(`/` + query)
    }
  }

  return (
    <>
      <div className="menu">
        <Menu
          mode="horizontal"
          items={items}
          onClick={onClick}
          selectedKeys={[current]}
          style={{ width: "100%" }}
        />
      </div>
    </>
  )
}

export default MyMenu
